{% extends "base.html" %}

{% block title %}用户登录{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-6 col-lg-5">
        <div class="card shadow-sm">
            <div class="card-header bg-primary text-white text-center">
                <h4 class="my-2">
                    <i class="bi bi-box-arrow-in-right me-2"></i>用户登录
                </h4>
            </div>
            <div class="card-body">
                <form id="loginForm" method="POST">
                    <input type="hidden" id="encryptedPassword" name="encrypted_password">
                    <input type="hidden" id="aesKey" name="aes_key">
                    <input type="hidden" id="aesIv" name="aes_iv">
                    <input type="hidden" name="encryption_type" value="aes">
                    <div class="mb-3">
                        <label for="username" class="form-label">用户名</label>
                        <div class="input-group">
                            <span class="input-group-text">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
                                    <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
                                </svg>
                            </span>
                            <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名" required>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="password" class="form-label">密码</label>
                        <div class="input-group">
                            <span class="input-group-text">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lock" viewBox="0 0 16 16">
                                    <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/>
                                </svg>
                            </span>
                            <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码" required>
                        </div>
                    </div>
                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="bi bi-box-arrow-in-right me-2"></i>登录
                        </button>
                    </div>
                </form>
                <div class="text-center mt-3">
                    <p class="mb-0">还没有账户？<a href="{{ url_for('auth.register') }}" class="text-decoration-none">立即注册</a></p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/gm-crypto.js') }}"></script>
<script>
    document.getElementById('loginForm').addEventListener('submit', async function(e) {
        e.preventDefault();
        
        // 获取用户名和密码
        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;
        
        // 显示加载状态
        const submitButton = this.querySelector('button[type="submit"]');
        const originalText = submitButton.innerHTML;
        submitButton.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>登录中...';
        submitButton.disabled = true;
        
        try {
            // 使用AES加密密码
            const aesResult = await gmCrypto.aesEncrypt(password);
            
            // 将加密结果转换为Base64编码
            const encryptedPasswordBase64 = gmCrypto.arrayBufferToBase64(aesResult.encryptedData);
            const keyBase64 = gmCrypto.arrayBufferToBase64(aesResult.key);
            const ivBase64 = gmCrypto.arrayBufferToBase64(aesResult.iv);
            
            // 将加密数据填入隐藏字段
            document.getElementById('encryptedPassword').value = encryptedPasswordBase64;
            document.getElementById('aesKey').value = keyBase64;
            document.getElementById('aesIv').value = ivBase64;
            
            // 清空原始密码字段
            document.getElementById('password').value = '';
            
            // 添加用户名到表单
            const usernameInput = document.createElement('input');
            usernameInput.type = 'hidden';
            usernameInput.name = 'username';
            usernameInput.value = username;
            this.appendChild(usernameInput);
            
            // 提交表单
            this.submit();
        } catch (error) {
            console.error('加密失败:', error);
            alert('密码加密失败，请重试');
            
            // 恢复按钮状态
            submitButton.innerHTML = originalText;
            submitButton.disabled = false;
        }
    });
    
    // 添加输入框动画效果
    document.addEventListener('DOMContentLoaded', function() {
        const inputs = document.querySelectorAll('.form-control');
        inputs.forEach(input => {
            input.addEventListener('focus', function() {
                this.parentElement.parentElement.classList.add('focused');
            });
            
            input.addEventListener('blur', function() {
                this.parentElement.parentElement.classList.remove('focused');
            });
        });
    });
</script>
{% endblock %}